<template>

    <div class="box">
        <div class="list">
            <h3>部门管理</h3>
            <div class="head">
                <button class="addbtn" @click="addDept">添加</button>
            </div>

            <table>
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>部门名称</th>
                        <th>部门负责人</th>
                        <th>负责人电话</th>
                        <th>详情</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item, index) in state.deptList" :key="item.id">
                        <td>{{ item.id }}</td>
                        <td>{{ item.name }}</td>
                        <td>{{ item.principal }}</td>
                        <td>{{ item.principal_tel }}</td>
                        <td><a href="" @click.prevent="goDetail(item.id)">详情</a></td>
                        <td><a href="" @click.prevent="delDept(item.id)">删除</a>|
                            <a href="" @click.prevent="editDept(item.id)">编辑</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

        <!-- 添加弹窗 -->
        <div class="addhover" v-show="isblock">
            <h3>添加部门</h3>
            <p>部门名称:
                <input type="text" v-model="newDept.name">
            </p>
            <p>部门负责人:
                <input type="text" v-model="newDept.principal">
            </p>
            <p>负责人电话:
                <input type="text" v-model="newDept.principal_tel">
            </p>
            <p>部门电话:
                <input type="text" v-model="newDept.tel">
            </p>
            <button class="addconfrim_btn" @click="addconfrim">添加</button>
            <button class="cancel_btn" @click="addcancel">取消</button>
        </div>

        <!-- 编辑弹窗 -->
        <div class="edithover" v-show="iseditblock">
            <h3>编辑部门</h3>
            <p>部门名称:
                <input type="text" v-model="state.deptDetail.name">
            </p>
            <p>部门负责人:
                <input type="text" v-model="state.deptDetail.principal">
            </p>
            <p>负责人电话:
                <input type="text" v-model="state.deptDetail.principal_tel">
            </p>
            <p>部门电话:
                <input type="text" v-model="state.deptDetail.tel">
            </p>
            <button class="editconfrim_btn" @click="editconfrim">确认修改</button>
            <button class="cancel_btn" @click="editcancel">取消</button>
        </div>
    </div>
</template>


<script setup>
import { inject, onMounted, reactive, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()
const $http = inject('$http')
const state = reactive({
    deptList: [],
    deptDetail: {}
})

//添加按钮的判断v-show 
const isblock = ref(false)

//编辑的判断v-show 
const iseditblock = ref(false)
//当前被编辑的部门ID
const currentEditId = ref(0);
//获取部门列表
const getDepList = async () => {
    const result = await $http.get("/deps")
    console.log(result.data.data);
    state.deptList = result.data.data.rows
}

onMounted(() => {
    getDepList()
})

const newDept = reactive({
    name: "",
    principal: "",
    principal_tel: "",
    tel: "",
})

//添加按钮，点击出现addhover
const addDept = () => {
    isblock.value = true
}
//添加确认
const addconfrim = async () => {
    console.log(newDept);
    isblock.value = false
    await $http.post("/dep", newDept)
    getDepList()
    //清空填的数据
    newDept.name = ""
    newDept.principal = ""
    newDept.principal_tel = ""
    newDept.tel = ""
    alert("添加成功")
}
//添加取消
const addcancel = () => {
    isblock.value = false
}
//删除
const delDept = async (id) => {
    if (!confirm("确定要删除这个部门吗？")) {
        return;
    }
    // console.log("删除的部门id为:" + id)
    await $http.delete(`/dep/${id}`)
    getDepList();
    alert("删除成功");
}
//编辑部门信息
const editDept = async (id) => {
    currentEditId.value = id;
    console.log(currentEditId.value);
    iseditblock.value = true
    const result = await $http.get(`/dep/${id}`)
    console.log(result.data.data);
    state.deptDetail = result.data.data
}
//编辑确认
const editconfrim = async () => {
    const editedDept = reactive({
        name: state.deptDetail.name,
        principal: state.deptDetail.principal,
        principal_tel: state.deptDetail.principal_tel,
        tel: state.deptDetail.tel,
    })
    await $http.put(`/dep/${currentEditId.value}`, editedDept)
    getDepList();
    alert("修改成功!")
    iseditblock.value = false
}

//编辑取消
const editcancel = () => {
    iseditblock.value = false
}
//部门详情
const goDetail = (id) => {
    router.push(`/home/deptuserdatil/${id}`)
}
</script>



<style scoped>
* {
    margin: 0;
    padding: 0;
}

.head {
    text-align: left;
    margin-bottom: 10px;

}

.list {
    position: relative;
}

.addbtn {
    width: 50px;
    background-color: #ddd;
    border: none;
    border-radius: 8px;
    color: black;
    font-size: 14px;
    padding: 5px;
    cursor: pointer;
}

.addhover,
.edithover {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-200px);
    width: 400px;
    text-align: center;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    background-color: #ddd;
    padding-top: 20px;
    z-index: 100;
}

.addhover input,
.edithover input {
    margin-top: 20px;
    height: 22px;
    padding: 5px 10px;
}

.addhover button,
.edithover button {
    margin: 20px 15px;
    width: 80px;
    height: 30px;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    background-color: #00d5ff;
}
</style>
